<template>
    <div class="part">
        <a ><slot name="p_img"></slot></a>
        <p><router-link to=""><slot name="p_tit"></slot></router-link></p>
        <div>
            <span><slot name="p_sche"></slot></span>
            <a  class="p_source"><slot name="p_source"></slot></a>
            <slot name="p_gold"></slot>
            <slot name="p_silver"></slot>
            <slot name="p_copper"></slot>
        </div>
        <dl>
            <dt><slot name="p_pri"></slot></dt>
            <dd><slot name="p_peo"></slot></dd>
        </dl>
    </div>
</template>

<script>
export default {
    name: "ComPart"
}
</script>

<style lang="less" scoped>
    .part{
        width: 220px;
        height: 224px;
        padding: 7px 7px 10px;
        border: 1px solid transparent;
        &:hover{
            box-shadow: 1px 1px 2px 1px #ececec;
            border-color: #ddd;
        }
        a{
            display: block;
            margin-bottom: 8px;
            img{
                display: block;
                width: 220px;
                height: 124px;
            }
        }
        p{
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 40px;
            font-size: 14px;
            margin-bottom: 6px;
            a{
                color: #333;
                word-wrap: break-word;
                white-space: pre-wrap;
                word-break: break-all;
                text-decoration: none;
                &:hover{
                    color: #23b8ff;
                }
            }
        }
        div{
            overflow: visible;
            margin-bottom: 3px;
            height: 18px;
            font-size: 12px;
            display: flex;
            flex-direction: row;
            span{
                color: #999;
                font-size: 12px;
            }
            .p_source{
                color: #999;
                margin-left: 8px;
                text-decoration: none;
                &::before{
                    content: "";
                    width: 1px;
                    height: 12px;
                    background-color: #ddd;
                    display: inline-block;
                    vertical-align: -1px;
                    margin-right: 8px;
                }
                &:hover{
                    color: #23b8ff;
                }
            }
            .p_gold{
                margin-left: 3px;
                display: block;
                width: 16px;
                height: 16px;
                background: url(../../public/img/icons/gold.png) no-repeat center center;
                background-size: 100%;
            }
            .p_silver{
                margin-left: 3px;
                display: block;
                width: 16px;
                height: 16px;
                background: url(../../public/img/icons/silver.png) no-repeat center center;
                background-size: 100%;
            }
            .p_copper{
                margin-left: 3px;
                display: block;
                width: 16px;
                height: 16px;
                background: url(../../public/img/icons/bronze.png) no-repeat center center;
                background-size: 100%;
            }
        }
        dl{
            line-height: 24px;
            display: flex;
            flex-direction: row;
            margin: 0;
            dt{
                color: #f4621f;
                font-size: 14px;
                line-height: 24px;
            }
            dd{
                color: #999;
                margin-left: 10px;
                font-size: 12px;
                line-height: 24px;
            }
        }
    }
</style>